<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（四种方式十个属性）
		 1.控制字体 font-famil  font-size  font-weight
		 2.控制文本布局：text-aglin,line-height,letter-spacing,word-spacing
		 3.文本的修饰效果:text-decoration text-shadow
		 4.处理文本效果:white-space
		 -->
		 <style>
			 /*css3语法：选择器{
				         属性：属性值；
						 属性：属性值；
						 .....	 
                         }
						 叫法：一个样式
						 
 */
           .y{/*通过加权方式，锁定元素*/
			   color: aqua;
			   /*知识点1：文本格式化属性控制字体
			   font-family：字体家族，指定字体形式
			   */
			   font-family:微软雅黑,华文彩云;
			   /*设置多个字体：浏览器会按照顺序寻找可用字体
			   用户体验，用户系统有什么字体，优先指定字体
			   通常与通配选择器使用  *{}
			   */
			  /*知识点2：文本格式化属性控制字体
			  font-size：字体大小属性，与单位共存
			  单位 px像素 使用特点：绝对值/em相对单位，理解：倍数 使用特点：相对于元素按倍数方式，移动端
			  */
			 /*知识点3：文本格式化属性控制字体
			 font-weight：字体粗细属性，不存在单位
			 属性值：数值[100,200.....900]
			 */
			/*知识点4：文本格式化属性控制文本格式【对齐，间隙】
			text-align:文本对齐属性
			Left/right/center/justify:两端对齐，用于弹性布局
			*/
		   /*知识点5：文本格式化属性控制文本格式
		    行高属性line-height：文本垂直效果
			使用方式：1.高度属性  属性值一致
			         2.在高度属性上加行高  属性值一致
		   */
		  /*补充：文本对齐和行高属于对齐/间隙：字符和单词之间距离*/
		  /*知识点6：letter-spacing：设置字符之间间隙
		    知识点7word-spacing：设置单词之间间隙
		  */
			 font-size: 4em;
			 font-weight:normal=400,bold,light;
			 text-transform: uppercase;
			 text-transform: capitalize;
			 text-indent: 200px;
			 border: 1px solid red;
			 height: 100px;
			 line-height: 100px;
			 letter-spacing: 30px;
			 word-spacing: 20px;
			 /*补充：1.英文大写；2.首字母大写3.段首间距200px*/
			/*知识点8 text-decoratoon 修饰超链接样式
			使用方法：与通配符一起使用，设置全局页面超链接样式
			属性值：none/underline-through（删除线）
			*/
			 text-decoration: underline-through;
			 /*知识点9：text-shadow修饰文本阴影
			 属性值：x轴 y轴 blur模糊 color
			 */
			text-shadow: 7px 8px 5px red;
			/*知识点10：文本换行效果
			white-space文本的换行属性
			属性值：nowrap：不换行
			pre：保留空格和回车
			normal：默认，空格合并，换行隐藏
			*/
		   white-space: pre;
		   p{
			   border: 1px solid red;
		   }
			
		   } 
		 </style>
	</head>
	<body>
		<div class="y">Lorem, ipsum dolor sit amet </div>
		<hr />
		<h4>文本修饰效果</h4>
		<!-- 文本修饰相关属性
		知识点8：text-decoration属性：设置超链接效果
		 -->
		<a href="https://www.bilibili.com/?spm_id_from=333.1073.0.0">实现跳转【方式：6种】</a>
		<div style="height: 800px;"></div>
		<marquee >
			<h4>处理文本效果</h4>
		</marquee>
		<p>Lorem ipsum dolor sit amet </p>
	</body>
</html>